<template>
	<view class="container">
		<view class="userinfo-list">
			<view class="userinfo-item">
				<view class="userinfo-name" style="line-height: 100rpx;">我的头像</view>
				<view class="userinfo-value">
					<!-- <image class="avatar" @click="chooseImage" :src="mineInfo.avatar" mode="aspectFill"></image> -->
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					  <image class="avatar" @click="chooseImage" :src="mineInfo.avatar" mode="aspectFill"></image>
					</button>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
				</view>
			</view>
		
			<view class="userinfo-item">
				<view class="userinfo-name">我的昵称</view>
				<view class="userinfo-value">
					<input @input="pickName" @blur="pickNameBlur" type="nickname" :value="mineInfo.nickname">
					<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
				</view>
			</view>
			<view class="userinfo-item">
				<view class="userinfo-name">绑定手机号</view>
				<view class="userinfo-value">
					<view v-if="mineInfo.mobile &&mineInfo.mobile!==''" class="pickvalue" @click="mobileTips('手机')">{{mineInfo.mobile}}</view>
					<button v-else class="pickvalue" open-type="getPhoneNumber" @getphonenumber="getMobile">暂未绑定手机 | 绑定</button>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
				</view>
			</view>
			<!-- <view class="userinfo-item">
				<view class="userinfo-name">性别</view>
				
				<view class="userinfo-value" v-if="mineInfo.gender!==0" @click="mobileTips('性别')">
					<view class="pickvalue" v-if='mineInfo.gender==1'>男</view>
					<view class="pickvalue" v-if='mineInfo.gender==2'>女</view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
				</view>
				<view class="userinfo-value" v-else>
					<picker @change="pickGender" :value="index" :range="gerdenList">
						<view class="picker">
							<view class="pickvalue" v-if='mineInfo.gender==0'></view>
							<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
						</view>
					 </picker>
				</view>
			</view> -->
			
			<!-- <view class="userinfo-item">
				<view class="userinfo-name">生日</view>
				<view class="userinfo-value" v-if="mineInfo.birthday" @click="mobileTips('生日')">
					<view class="pickvalue">{{mineInfo.birthday}} </view>
					<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
				</view>
				<view class="userinfo-value" v-else>
					<picker @change="pickDate" :value="index" mode="date">
						<view class="picker">
							<view class="pickvalue"> {{mineInfo.birthday}} </view>
							<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
						</view>
					 </picker>
				</view>
			</view> -->
			
			<!-- <view class="userinfo-item">
				<view class="userinfo-name">地区</view>
				<view class="userinfo-value">
					<picker @change="pickRegion" mode="region" :value="index" :range="region">
						<view class="picker">
							<view class="pickvalue"> {{mineInfo.region}} </view>
							<image src="../../static/index/index_right.png" mode="aspectFill" class="arrow"></image>
						</view>
					 </picker>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {UpDateUserinfo , GetAliyunToken } from '../../apis/index.js';
	
	import { apiMemberUpdate } from '../../apis/my.js';
	import upload from '../../utils/request/upload.js';
	export default {
		data() {
			return {
				customItem:[],
				mineInfo:{},
				gerdenList:['男','女'],
				region:[],
				chooseImg:''//上传后图片地址
			};
		},
		onShow(options) {
			let that = this;
			that.mineInfo = uni.getStorageSync('mineInfo');
		},
		methods:{
			onChooseAvatar(e) {
				console.log(e,"eee")
			  this.mineInfo.avatar=e.detail.avatarUrl
				// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
				var tempFilePaths = e.detail.avatarUrl;
				upload.uploadMed(tempFilePaths).then( img => {
					this.chooseImg = img;
					this.mineInfo.avatar = img;
					this.upadteInfo()
				});
			},
			mobileTips(type){
				switch(type){
					case '手机':
						uni.showToast({
							title:'您已绑定过手机号',
							icon:'none'
						})
					break;
					default:
						uni.showToast({
							title:type +'不可多次更改',
							icon:'none'
						})
					break;
				}
			},
			getMobile(e){
				let that = this;
				app.GetMobile(e,function(e){
					
					that.getUserInfo();
					
				});
				// app.GetMobile(e,function(e){
				// 	console.log(e,'授权手机号');
				// 	that.upadteInfo()
				// 	app.getUserInfo(function(lRes){
				// 		that.mineInfo = lRes;
				// 		uni.setStorageSync('mineInfo',lRes);
				// 	})
				// });
			},
			pickName(e){
				
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					this.mineInfo.nick_name = e.detail.value;
					// this.upadteInfo();
				}
			},
			pickNameBlur(e){
				console.log(e,"e")
				// this.mineInfo.nick_name = e.detail.value;
				if(e.detail.value.length>11){
					uni.showToast({
						title:'最多可输入11个字',
						icon:'none'
					})
				}else {
					this.mineInfo.nick_name = e.detail.value;
					this.upadteInfo();
				}
			},
			pickGender(e){
				this.mineInfo.gender = e.detail.value == 0?1:2;
				this.upadteInfo()
			},
			pickDate(e){
				this.mineInfo.birthday = e.detail.value;
				this.upadteInfo()
			},
			pickRegion(e){
				this.mineInfo.region = e.detail.value[1]+'·'+e.detail.value[2];
				this.region = e.detail.value
				this.upadteInfo()
			},
			chooseImage(){
				let that = this;
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function (res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						console.log(tempFilePaths,"tempFilePaths")
						upload.uploadMed(tempFilePaths[0]).then( img => {
							
							that.chooseImg = img;
							that.mineInfo.avatar = img;
							that.upadteInfo()
						});
					}
				});
			},
			upadteInfo(){
				let that = this;
				let mineInfo = that.mineInfo;
				apiMemberUpdate({
					// birthday:mineInfo.birthday,
					nickname:mineInfo.nick_name,
					avatar:mineInfo.avatar,
					// sex:mineInfo.gender,
					// region:mineInfo.region
				}).then( res=> {
					switch(res.code){
						case 200:
							app.getUserInfo(function(lRes){
								that.mineInfo = lRes;
								uni.setStorageSync('mineInfo',lRes);
							})
							uni.showToast({
								title:'修改成功！',
								icon:'none'
							})
						break;
						default:
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						break;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo-list {
		padding: 30rpx ;
		.userinfo-item {
			font-size: 28rpx!important;
			color: #333333;
			line-height: 40rpx;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #efefef;
			display: flex;
			justify-content: space-between;
		}
		.userinfo-name {
			flex: 1;
		}
		.userinfo-value {
			display: flex;
			align-items: center;
		}
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.arrow {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
		input {
			text-align: right;
		}
		button {
			background-color: #ffffff;
			color: #999999;
			font-size: 28rpx!important;
		}
		picker {
		}
		.pickvalue {
			min-width: 100rpx;
			text-align: right;
		}
		.picker {
			display: flex;
			line-height: 32rpx;
			// min-width: 100rpx;
			// text-align: right;
		}
	}

</style>
